<template>
  <div>
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="personalnfo"
      :rules="rules"
      ref="personalnfo"
      class="demo-ruleForm"
    >
      <!-- 第一行 -->
      <el-row>
        <el-col :span="24">
          <h2>基本信息</h2>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="姓名">
              <el-input v-model="personalnfo.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input v-model="personalnfo.type"></el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-input v-model="personalnfo.national"></el-input>
            </el-form-item>
            <el-form-item label="固定电话">
              <el-input v-model="personalnfo.telephone"></el-input>
            </el-form-item>
            <el-form-item label="最高学历" prop="educate">
              <el-input v-model="personalnfo.educate"></el-input>
            </el-form-item>
            <el-form-item label="毕业时间" prop="graduation">
              <el-input v-model="personalnfo.graduation"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="personalnfo.sex"></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="personalnfo.certificate"></el-input>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="personalnfo.nativePlace"></el-input>
            </el-form-item>
            <el-form-item label="参加工作时间" prop="worktime">
              <el-input v-model="personalnfo.worktime"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school">
              <el-input v-model="personalnfo.school"></el-input>
            </el-form-item>
            <el-form-item label="行政职务" prop="duty">
              <el-input v-model="personalnfo.duty"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="personalnfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-input v-model="personalnfo.birth"></el-input>
            </el-form-item>

            <el-form-item label="电子邮箱">
              <el-input v-model="personalnfo.email"></el-input>
            </el-form-item>
            <el-form-item label="政治面貌" prop="political">
              <el-input v-model="personalnfo.political"></el-input>
            </el-form-item>
            <el-form-item label="所学专业" prop="major">
              <el-input v-model="personalnfo.major"></el-input>
            </el-form-item>
            <el-form-item label="行政级别">
              <el-input v-model="personalnfo.level"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24">
          <h2>申报信息</h2>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="申报方式" label-width="130px">
              <el-input v-model="personalnfo.declarationMode"></el-input>
            </el-form-item>
            <el-form-item label="申报专技资格名称" label-width="130px">
              <el-input v-model="personalnfo.nameOfSpecialSkillDeclaration"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="破格情况" label-width="130px">
              <el-input v-model="personalnfo.exceptionSituation"></el-input>
            </el-form-item>
            <el-form-item label="申报专技级别" label-width="130px">
              <el-input v-model="personalnfo.specialSkillLevel"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="申报专业技术系列" label-width="130px">
              <el-input v-model="personalnfo.specialTechnologySeries"></el-input>
            </el-form-item>
            <el-form-item label="申报资格专业" label-width="130px">
              <el-input v-model="personalnfo.declarationQualificationMajor"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row>
        <el-col :span="16">
          <div class="col_css_reszon">
            <el-form-item label="破格/转系列申报理由" label-width="150px">
              <el-input v-model="personalnfo.reasonsForDeclaration"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css"></div>
        </el-col>
      </el-row>

      <!-- 第六行 -->
      <el-row>
        <!-- 左边的大列 -->
        <el-col :span="16">
          <el-row>
            <el-col :span="16">
              <h2>职称外语、计算机情况</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="col_css">
                <el-form-item label="职称外语考试情况" label-width="130px">
                  <el-input v-model="personalnfo.foreignExam"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class=" computer_css" >
                <el-form-item label="职称计算机考试情况" label-width="140px">
                  <el-input v-model="personalnfo.computer"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 右边装身份证照片的大列 -->
        <el-col :span="8">
          <el-row>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                  <div class="block">
                <el-image :src="src1">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                  <div class="block">
                <el-image :src="src2">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              </div>
            </el-col>
          </el-row>

        
        </el-col>
      </el-row>

     
     
     
     
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id:2,
      
      src1: '',
      src2:'', 
      
      labelPosition: "right",
       personalnfo: {
        name: "",
        sex: "",
        national: "",
        telephone: "",
        type: "",
        certificate: "",
        email: "",
        educate: "",
        level: "",
        graduation: "",
        phone: "",
        nativePlace: "",
        worktime: "",
        school: "",
        duty: "",
        birth: "",
        political: "",
        major: "",
        foreignExam: "",
        computer: "",
        declarationMode: "",
        nameOfSpecialSkillDeclaration: "",
        exceptionSituation: "",
        specialSkillLevel: "",
        specialTechnologySeries: "",
        declarationQualificationMajor: "",
        reasonsForDeclaration: "",
        imageUrl: ""
      },
      rules: {
        name: [{ required: true, message: "", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        national: [{ required: true, message: "请选择民族", trigger: "blur" }],
        educate: [{ required: true, message: "请选择最高学历", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        nativePlace: [{ required: true, message: "请选择籍贯", trigger: "blur" }],
        worktime: [{ required: true, message: "请选择参加工作时间", trigger: "blur" }],
        graduation: [{ required: true, message: "请选择毕业时间", trigger: "blur" }],
        school: [{ required: true, message: "请输入毕业院校", trigger: "blur" }],
        duty: [{ required: true, message: "请输入行政职务", trigger: "blur" }],
        birth: [{ required: true, message: "请选择出生日期", trigger: "blur" }],
        political: [{ required: true, message: "请选择政治面貌", trigger: "blur" }],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }]
      },
    };
  },
  methods: {
     getCon() {
      this.$axios({
        url: "/personalbasic/find",
        params: {
          id: this.id
        }
      }).then(res => {
        // console.log(22222222,res);
        this.personalnfo = { ...(res.data.data)};
      });
    },

  
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  mounted(){
    this.getCon();
    this.src1 = sessionStorage.getItem('imgAddress1');
    // console.log(this.src1);
    this.src2 = sessionStorage.getItem('imgAddress2');
  }
};
</script>
<style scoped lang="less">
h2 {
  margin: 20px 0;
}
.el-form-item,
.el-form-item__content {
    
//   width: 300px;
//   float: left;
}
.computer_css {
    width: 450px;
    .el-form-item {
        margin-left: 120px;
    }
    // float: right;
}
.col_css {
  width: 310px;
}
.col_css_reszon {
    width: 710px;
}
.edu_css {
  padding-left: 15px;
}
.btn_css {
  width: 150px;
  height: 40px;
  display: block;
  margin: 20px auto;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  //   padding: 10px 0;
  //   background-color: #f9fafc;
}


</style>
